import { memo, useCallback, useState } from "react";

const MemoSon = memo(function Son({ onChange }) {
  console.log('父子组件传递函数，调用导致子组件重新渲染')
  return <input onChange={(e) => onChange(e)} />
})
function App() {
  const [count, setCount] = useState(0)
  // const setValue=(e)=>{
  //   console.log(e.target.value)
  // }
  //缓存函数，解决父子组件传递函数，调用导致子组件重新渲染的问题
  const changeHandler = useCallback((e) => {
    console.log(e.target.value)
  }, [])
  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)}>{count}</button>
      {/* <MemoSon onChange={setValue} /> */}
      <MemoSon onChange={changeHandler} />
    </div>
  );
}

export default App;
